<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="postForm" ref="postForm">

      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <div class="postInfo-container">
              
                <el-row>
                    <el-tooltip  class="item" effect="dark" content="请输入升学路径名称" placement="top">
                        <el-form-item label-width="110px" label="升学路径：" class="postInfo-container-item" prop="pathName">
                          <el-input style="min-width:550px" placeholder="请输入升学路径名称" maxlength="100" v-model="postForm.pathName">
                          </el-input>
                        </el-form-item>
                    </el-tooltip>
                </el-row>
              
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="上传图标：">
                            <el-upload
                                style="margin-left:10px"
                                :headers="headers"
                                action="/tools/oss/upload"
                                :on-preview="handlePreview"
                                :before-remove="beforeRemove_icon"
                                :on-remove="handleRemove_icon"
                                :on-success="handleUploadSuccess_icon"
                                list-type="picture"
                                :file-list="fileList_icon"
                                :limit="1">
                                <el-button size="small" type="primary">上传图标</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="18">
                        <div class="editor-container">
                            <el-tooltip  class="item" effect="dark" content="请输入定义" placement="top">
                                <el-form-item label-width="110px" label="定义：" class="postInfo-container-item" prop="pathDefine">
                                <Tinymce :height=400 ref="editor" v-model="postForm.pathDefine"  :value="postForm.pathDefine"/>
                                </el-form-item>
                            </el-tooltip>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="18">
                        <div class="editor-container">
                            <el-tooltip  class="item" effect="dark" content="请输入适合人群" placement="top">
                                <el-form-item label-width="110px" label="适合人群：" class="postInfo-container-item" prop="suitCrowd">
                                <Tinymce :height=200 ref="editor" v-model="postForm.suitCrowd"  :value="postForm.suitCrowd"/>
                                </el-form-item>
                            </el-tooltip>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="18">
                        <div class="editor-container">
                            <el-tooltip  class="item" effect="dark" content="请输入考试时间" placement="top">
                                <el-form-item label-width="110px" label="考试时间：" class="postInfo-container-item" prop="testSchedule">
                                <Tinymce :height=200 ref="editor" v-model="postForm.testSchedule"  :value="postForm.testSchedule"/>
                                </el-form-item>
                            </el-tooltip>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="18">
                        <div class="editor-container">
                            <el-tooltip  class="item" effect="dark" content="请输入报考流程" placement="top">
                                <el-form-item label-width="110px" label="报考流程：" class="postInfo-container-item" prop="process">
                                <Tinymce :height=200 ref="editor" v-model="postForm.process"  :value="postForm.process"/>
                                </el-form-item>
                            </el-tooltip>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="18">
                        <div class="editor-container">
                            <el-tooltip  class="item" effect="dark" content="请输入考试形式" placement="top">
                                <el-form-item label-width="110px" label="考试形式：" class="postInfo-container-item" prop="testForm">
                                <Tinymce :height=200 ref="editor" v-model="postForm.testForm"  :value="postForm.testForm"/>
                                </el-form-item>
                            </el-tooltip>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="18">
                        <div class="editor-container">
                            <el-tooltip  class="item" effect="dark" content="请输入报考常识" placement="top">
                                <el-form-item label-width="110px" label="报考常识：" class="postInfo-container-item" prop="commonSense">
                                <Tinymce :height=200 ref="editor" v-model="postForm.commonSense"  :value="postForm.commonSense"/>
                                </el-form-item>
                            </el-tooltip>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-form-item label="视频介绍" prop="videoIntroduce" style="margin-top:20px">
                      <el-input v-model="postForm.videoIntroduce" type='text' style='display:none'></el-input>
                        <el-upload
                            ref="upload"
                            :headers="headers"
                            action="/tools/oss/uploadVideo"
                            :on-success="uploadSuccess"
                            :on-remove="handleRemoveVideo"
                            :on-progress="handProgress"
                            :file-list="fileList"
                            :show-file-list="false"
                            :auto-upload="true"
                            :accept="'.mp4'"
                            :limit="2">
                            <el-button slot="trigger" size="small" type="primary" plain>上传视频</el-button>
                            <el-button size="small" type="danger"  @click="clearUpload">移除</el-button>
                        </el-upload>
                        <video
                            v-if='postForm.videoIntroduce' 
                            ref="videoBox"
                            id="testVideo" 
                            class="video-js" 
                            height="300px"
                            preload="auto"
                            controls="" 
                            :src="postForm.videoIntroduce">
                        </video>
                        <el-progress :text-inside="true" :stroke-width="16" :percentage="uploadProgress" v-show='uploadProgress'></el-progress>
                    </el-form-item>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label-width="100px" label="设置筛选条件：" class="postInfo-container-item" prop="conditions">
                            <el-select v-model="postForm.conditionIds" multiple placeholder="请选择（可多选）" @change="getConditionOptions" track-by="value" label="label">
                              <el-option
                                v-for="item in conditions"
                                :key="item.id"
                                :label="item.condition"
                                :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item> 
                    </el-col>
                </el-row>     

                
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="设置关联课程" prop='courseIds'>
                      <el-button size="mini" type="primary" @click="chooseCommodity(commodityData)">选择课程</el-button>
                      <ul >
                        <li style="marginRight: 5px" v-for="(item, index) of this.commodityName" :key="index">{{ item }}</li>
                      </ul>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="设置关联院校" prop='academyIds'>
                          <el-button size="mini" type="primary" @click="chooseSchool(academyData)">选择院校</el-button>
                          <ul >
                            <li style="marginRight: 5px" v-for="(item, index) of this.academyName" :key="index">{{ item }}</li>
                          </ul>
                        </el-form-item>
                    </el-col>
                </el-row>

            </div>
          </el-col>
        </el-row>
      </div>

      <div class="create">
        <el-button v-loading="loading" type="success" :disabled="isDisable" @click="submitForm()">创建升学路径</el-button>
      </div>

      
      <!--添加设置关联对话框-->
      
      <set-commodities :dialog="setComDialog" :setMsgObj="{setCommodityLists}" @cancel="setComDialogCancel" @handleDialogSaveCom="handleDialogSaveCom"></set-commodities>
      <set-academy :dialog="setDialog" :setMsgObj="{setSchoolLists}" @cancel="setDialogCancel" @handleDialogSaveArr="handleDialogSaveArr"></set-academy>

    </el-form>
  </div>
</template>

<script>
import setCommodities from './components/setCommodities'
import setAcademy from './components/setAcademy'
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/headImage'
import MDinput from '@/components/MDinput'
import Sticky from '@/components/Sticky' // 粘性header组件
import Multiselect from 'vue-multiselect' // 使用的一个多选框组件，element-ui的select不能满足所有需求
import 'vue-multiselect/dist/vue-multiselect.min.css' // 多选框组件css
import { getLessonsList } from '@/api/curriculum'
import { validateURL } from '@/utils/validate'
import { getAdd, getCondits } from '@/api/path'
import { getToken } from '@/utils/auth' // 验权

export default {
  name: 'add',
  components: { Tinymce, MDinput, Upload, Sticky, Multiselect, setCommodities, setAcademy },
  data() {
    return {
      postForm: {
        pathName:'',
        pathDefine:'',
        suitCrowd: '',
        testSchedule: '',
        process: '',
        testForm: '',
        commonSense: '',
        icon:'',
        videoIntroduce:'',
        commodityType: 1,
        courseIds:[],
        academyIds:[],
        conditionIds:[],
        academyInfo:[],
        courseInfo:[]
      },
      preventSumit:false,
      progressFactor:0.96,
      uploadProgress:0,
      isCreateCommodity: true,
      lessonData: [], //课程列表
      lessonType: 1,
      isPreviewCommodity: true,
      typeDialogVisible: false,
      headers:{},
      fileList:[],
      fileList_icon:[],
      conditions:[],
      setSchoolLists: [],
      setCommodityLists: [],
      isDisable: false,
      academyData: [],
      academyName: [],
      commodityData: [],
      commodityName: [],
      showDialog: false,
      setDialog: false,
      setComDialog: false,
      nowDate: '', // 当前时间
      loading: false
    }
  },
  mounted() {
    this.headers = { accessToken:getToken() }
    this.getConditionOptions()
  },
  watch:{
    // 'postForm.conditionIds'(e){
    //   if( e.length == 0 || e.indexOf(1) == -1){
    //     this.postForm.conditionIds = e
    //     return
    //   }else if(e.indexOf(1) != -1){
    //     this.postForm.conditionIds = [1]
    //     return
    //   }
    // }
  },
  methods: {
    //上传视频
    onBeforeUpload(file){
      this.progressFactor = Math.random(1)
      this.preventSumit = true
    },
    uploadSuccess(response, file, fileList) {
      const { code, data:{ picUrlList }, message } = response
      if(code == 0){
        this.fileList = [{ name:picUrlList[0], url:picUrlList[0] }]
        this.uploadProgress = 100
        this.preventSumit = false
        this.postForm.videoIntroduce = this.fileList[0].url
        setTimeout(() => { this.uploadProgress = 0 }, 1000)
      }else{
        this.$refs.upload.clearFiles()
        this.$notify({
          title: '失败',
          message: message,
          type: 'error',
          duration: 3000
        })
        this.preventSumit = false
      }
    },
    handleRemoveVideo(file) {
      this.$refs.upload.clearFiles()
      this.fileList = []
      this.postForm.videoIntroduce = ''
    },
    handProgress(file) {
      this.uploadProgress = parseInt(file.percent * this.progressFactor)
    },
    clearUpload() {
      if (!this.fileList.length) return false
      this.$refs.upload.clearFiles()
      this.fileList = []
      this.postForm.videoIntroduce = ''
    },

    handleDialogSaveArr(data) {
      const arr = []
      const name = []
      for (const item of data) {
        arr.push(item.academyId)
        name.push(item.academyName)
      }
      this.postForm.academyIds = arr
      this.academyName = name
      this.academyData = data
      this.setDialog = false
    },
    setDialogCancel() {
      this.setDialog = false
    },
    //选择课程
    chooseCommodity(commodityData) {
      this.setCommodityLists = commodityData
      this.setComDialog = true
    },
    handleUploadSuccess_icon(rst){
      const { code, data:{ picUrlList } } = rst
      if(code == 0){
        this.postForm['icon'] = picUrlList[0]
      }
    },
    handlePreview(file) {
    },
    beforeRemove_icon(file, fileList) {
      return this.$confirm(`此操作将永久删除该图片, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    handleRemove_icon(file, fileList_icon){
      this.postForm.icon = ''
    },
    //获得筛选条件
    getConditionOptions(){
      getCondits().then(response => {
        const { code, data } = response
        if (code == 0) {
          this.conditions = data
        }
      })
    },
    chooseSchool(academyData) {
      this.setSchoolLists = academyData
      this.setDialog = true
    },
    setComDialogCancel() {
      this.setComDialog = false
    },
    handleDialogSaveCom(data) {
      const arr = []
      const name = []
      for (const item of data) {
        arr.push(item.courseId)
        name.push(item.title)
      }
      this.postForm.courseIds = arr
      this.commodityName = name
      this.commodityData = data
      this.setComDialog = false
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          const params = this.postForm
          const { pathName, pathDefine, suitCrowd, testSchedule, process, testForm, commonSense, icon, conditionIds } = params
          if(pathName.length == 0 || pathName === ''){
            this.$message({
              message: '路径名不能为空',
              type: 'error',
              duration: 1000
            })
            this.loading = false
            return
          }
          if(pathDefine.trim().length == 0 || pathDefine == '<p><br data-mce-bogus="1"></p>' || pathDefine == '<p>&nbsp;</p>' || pathDefine == '<p><br></p>'){
            this.$message({
              message: '定义不能为空',
              type: 'error',
              duration: 1000
            })
            this.loading = false
            return
          }
          if(suitCrowd.trim().length == 0 || suitCrowd == '<p><br data-mce-bogus="1"></p>' || suitCrowd == '<p>&nbsp;</p>' || suitCrowd == '<p><br></p>'){
            this.$message({
              message: '适合人群不能为空',
              type: 'error',
              duration: 1000
            })
            this.loading = false
            return
          }
          if(testSchedule.trim().length == 0 || testSchedule == '<p><br data-mce-bogus="1"></p>' || testSchedule == '<p>&nbsp;</p>' || testSchedule == '<p><br></p>'){
            this.$message({
              message: '报考时间不能为空',
              type: 'error',
              duration: 1000
            })
            this.loading = false
            return
          }
          if(process.trim().length == 0 || process == '<p><br data-mce-bogus="1"></p>' || process == '<p>&nbsp;</p>' || process == '<p><br></p>'){
            this.$message({
              message: '报考流程不能为空',
              type: 'error',
              duration: 1000
            })
            this.loading = false
            return
          }
          if(testForm.trim().length == 0 || testForm == '<p><br data-mce-bogus="1"></p>' || testForm == '<p>&nbsp;</p>' || testForm == '<p><br></p>'){
            this.$message({
              message: '考试形式不能为空',
              type: 'error',
              duration: 1000
            })
            this.loading = false
            return
          }
          if(commonSense.trim().length == 0 || commonSense == '<p><br data-mce-bogus="1"></p>' || commonSense == '<p>&nbsp;</p>' || commonSense == '<p><br></p>'){
            this.$message({
              message: '报考常识不能为空',
              type: 'error',
              duration: 1000
            })
            this.loading = false
            return
          }
          if(icon.length == 0){
            this.$message({
              message: '请上传图标',
              type: 'error',
              duration: 1000
            })
            this.loading = false
            return
          }
          if(conditionIds.length == 0){
            this.$message({
              message: '请选择该路径的筛选条件',
              type: 'error',
              duration: 1000
            })
            this.loading = false
            return
          }
          this.isDisable = true
          getAdd(params).then(response => {
            const { code } = response
            if (code == 0) {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 1000
              })
              this.$router.push({ path: '/path/list' })
            }else{
              this.$message({
                title: '失败',
                message: message,
                type: 'error',
                duration: 2000
              })
            }
          }).catch(err => {})
            .finally(() => this.isDisable = false)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'src/styles/mixin.scss';

.viewShow {

  /deep/ .el-dialog {
    width: 350px;
    height: 760px;
    padding: 100px 12px;
    border-radius: 50px;
    background: url('../../assets/phone.png') no-repeat;
    background-size: 100% 100%; 

    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      padding: 0;
      background: #fff;
      width: 100%;
      height: 100%;

      .information-cont{
        padding: 0 15px;
        background: #fff;
        white-space:normal; 
        word-break:break-all;
        height: 100%;
        overflow-y: auto;

        h3 {
          font-size: 20px;
          line-height: 32px;
          color: #333333;
          font-weight: bold;
          padding-top: 15px;
          margin: 0;

        }

        .smallLine{
          display: flex;
          display: -webkit-flex;
          justify-content:space-between;
          -webkit-justify-content: space-between;
          align-items: center;
          -webkit-align-items: center;
          font-size: 13px;
          color: #BBB;
          padding-top: 20px;
          padding-bottom: 17px;
          border-bottom: 1px solid #E5E8ED;
        }

        .artical-cont{
          padding-top: 16px;
          font-size: 15px;
          overflow: hidden;
          img{
            width: 100%;
          }
        }

      }

    }

  }

}

.upload-img-dev{
  width:320px;
  height:160px;
  position: absolute;
  right: 200px;
  bottom: 60px;
  z-index: 3;
}
.upload-img{
  width:320px;
  height:160px;
}
.tagLeft{
  margin-left:10px;
}
.title-prompt {
  position: absolute;
  right: 0px;
  font-size: 12px;
  top: 10px;
  color: #ff4949;
}
.createPost-container {
  position: relative;
  .createPost-main-container {
    padding: 40px 45px 20px 300px;
    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;
      .postInfo-container-item {
        float: left;
      }
    }
    .editor-container {
      min-height: 300px;
      .editor-upload-btn-container {
        text-align: right;
        margin-right: 10px;
        .editor-upload-btn {
          display: inline-block;
        }
      }
    }
  }
  .word-counter {
    width: 40px;
    position: absolute;
    right: -10px;
    top: 0px;
  }
}

.create {
  text-align:center;
  margin: 0 auto;
  margin-bottom: 40px;
}
</style>

